<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>视频翻页演示</title>
    <style>
      .page {
        width: 100%;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        transition: transform 0.5s ease;
        background: #000;
      }
      .page-content {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .page-content video {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain;
      }
      #status {
        position: fixed;
        top: 10px;
        right: 10px;
        padding: 10px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        border-radius: 5px;
        z-index: 1000;
      }
    </style>
  </head>
  <body>
    <div id="status">等待连接...</div>
    <div id="page1" class="page">
      <div class="page-content">
        <video src="public/mp4/首页.mp4" loop muted></video>
      </div>
    </div>
    <div id="page2" class="page" style="transform: translateX(100%)">
      <div class="page-content">
        <video src="public/mp4/聂云台01-3.mp4" loop muted></video>
      </div>
    </div>
    <div id="page3" class="page" style="transform: translateX(100%)">
      <div class="page-content">
        <video src="public/mp4/聂云台02-3.mp4" loop muted></video>
      </div>
    </div>
    <div id="page4" class="page" style="transform: translateX(100%)">
      <div class="page-content">
        <video src="public/mp4/聂云台03-3.mp4" loop muted></video>
      </div>
    </div>
    <script>
      const ws = new WebSocket("ws://localhost:8080");
      const pages = document.querySelectorAll(".page");
      const videos = document.querySelectorAll("video");
      let currentPage = 0;

      // 初始化视频
      videos.forEach((video, index) => {
        if (index === 0) {
          video.play();
        } else {
          video.pause();
        }
      });

      ws.onopen = () => {
        document.getElementById("status").textContent = "已连接到服务器";
      };

      ws.onclose = () => {
        document.getElementById("status").textContent = "连接已断开";
      };

      ws.onmessage = (event) => {
        const value = parseInt(event.data);
        if (!isNaN(value)) {
          // 根据接收到的值进行翻页
          if (value === 1) {
            // 下一页
            if (currentPage < pages.length - 1) {
              videos[currentPage].pause();
              currentPage++;
              videos[currentPage].play();
              updatePagePosition();
            }
          } else if (value === 2) {
            // 上一页
            if (currentPage < pages.length - 1) {
              videos[currentPage].pause();
              currentPage++;
              videos[currentPage].play();
              updatePagePosition();
            }
          } else if (value === 3) {
            // 上一页
            if (currentPage < pages.length - 1) {
              videos[currentPage].pause();
              currentPage++;
              videos[currentPage].play();
              updatePagePosition();
            }
          } else if (value === 0) {
            // 上一页
            if (currentPage > 0) {
              videos[currentPage].pause();
              currentPage--;
              videos[currentPage].play();
              updatePagePosition();
            }
          }
        }
      };

      function updatePagePosition() {
        pages.forEach((page, index) => {
          if (index < currentPage) {
            page.style.transform = "translateX(-100%)";
          } else if (index === currentPage) {
            page.style.transform = "translateX(0)";
          } else {
            page.style.transform = "translateX(100%)";
          }
        });
      }
    </script>
  </body>
</html>
